<template>
	<view>
		<text>今日训练：颠球</text>
		<view>
			<view>
				<video id="myVideo" src="../../static/video.mp4" :danmu-list="danmuList" enable-danmu danmu-btn
					controls></video>
			</view>
			<view class="uni-list uni-common-mt">
				<view class="uni-list-cell">
					<view>
						<view class="uni-label">弹幕内容</view>
					</view>
					<view class="uni-list-cell-db">
						<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
					</view>
				</view>
			</view>
			<view class="uni-btn-v">
				<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
			</view>
			<view v-if="videoPath !== ''">
				<video id="myVideo" :src="videoPath" @error="videoErrorCallback" enable-danmu danmu-btn
					controls></video>
			</view>
			<button type="primary" @click="saveVideo">录制视频并保存到本地</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				danmuList: [{
						text: '第 1s 出现的弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				],
				danmuValue: '',
				videoPath: '',
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		methods: {
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			saveVideo() {
				let _this = this;
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera'],
					success: res => {
						console.log(res.tempFilePath)
						this.videoPath = res.tempFilePath;
						this.getTempFilePath(res.tempFilePath, 'videoTempPath');
					},
					fail: (err) => {
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.camera'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机获取视频，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
					}
				});
			},
			getTempFilePath(url, types) {
						uni.showLoading({
							title: '保存中...'
						});
						// 如果已经下载本地路径，那么直接储存
						let obj = {
							filePath: url,
							success: () => {
								uni.showModal({
									content: '保存成功',
									showCancel: false
								});
								uni.hideLoading();
							},
							fail: e => {
								uni.hideLoading();
								uni.showModal({
									content: '保存失败',
									showCancel: false
								});
							}
						};
						
						if (types === 'videoTempPath') {
							uni.saveVideoToPhotosAlbum(obj);
						} else {
							uni.saveImageToPhotosAlbum(obj);
						}
					}
		}
	}
</script>

<style>

</style>